<template>
  <div>
    <el-row>
      <el-col :span="4">&nbsp &nbsp</el-col>
      <el-col :span="16">

        <el-row>
          <el-col :span="8">

            <div id="MyCenter-1">
              <i class="el-icon-user"></i>场馆中心
            </div>
            <el-card :body-style="{ padding: '0px' }">
              <img :src="venueBase.venueImage" class="image" alt="暂无信息 请完成平台认证">
              <div style="padding: 14px;">
                <div>
                  场馆名：<span>{{ venueBase.venueName }}</span>
                </div>
                <div class="bottom clearfix">
                  <span class="time">场馆电话: {{ venue.venuePhone }}</span>
                  <el-button @click="changepass" type="text" class="button" size="small"
                    style="font-size:14px;">修改密码</el-button>
                  <el-button type="text" v-if="venueBase.createTime==null"  @click="PerfectInformation" class="button" size="small"
                    style="font-size:14px ;">完善信息</el-button>
                </div>
              </div>
            </el-card>


          </el-col>
          <el-col :span="1">
            &nbsp
          </el-col>
          <el-col :span="15">

            <div id="Mycenter-2">详细信息：</div></br>
            <div>场馆地址：{{venueBase.venueAddress}}</div></br>
            <div>场馆细节：{{venueBase.venueDetails}}</div></br>
            <div>营业开始时间：{{venueBase.businessStartTime}}</div></br>
            <div>营业结束时间：{{venueBase.businessEndTime}}</div></br>
            <div>面积：{{venueBase.area}}</div></br>
            <div>建立时间：{{venueBase.createTime}}</div></br>
            <div>教室数量：{{classroomNum.total}}</div></br>
            <div>评分：{{venueBase.score}}</div></br>
          </el-col>
        </el-row>
      </el-col>
      <el-col :span="4">&nbsp</el-col>


      <el-dialog title="完善场馆信息" :visible.sync="showPerfectInformation" width="30%">
        <div class="block">
          <span class="demonstration">请设置营业起始时间、营业结束时间</span>
          <el-date-picker v-model="value1" type="datetimerange" start-placeholder="开始日期" end-placeholder="结束日期"
            :default-time="['08:00:00']">
          </el-date-picker>
        </div>
        <el-input v-model="area" placeholder="请输入场馆总面积"></el-input>
        <div class="block">
          <span class="demonstration">场馆建立时间：</span>
          <el-date-picker format="yyyy-MM-dd HH:mm:ss" v-model="value2" align="right" type="date" placeholder="选择日期"
            :picker-options="pickerOptions">
          </el-date-picker>
        </div>

        <el-button @click="showPerfectInformation = false">取 消</el-button>
        <el-button @click="addVenueBase()" type="primary">确 定</el-button>

      </el-dialog>

      <el-dialog title="修改密码" :visible.sync="showUpdatepass" width="30%">
        <el-input placeholder="请输入新密码"></el-input>
        <el-button @click="showUpdatepass = false">取 消</el-button>
        <el-button @click="updateVenuePass()" type="primary">确 定</el-button>

      </el-dialog>



    </el-row>

  </div>
</template>



<script>
  export default {
    name: "VenuePersonalCenter",
    data() {
      return {
        pickerOptions: {
          disabledDate(time) {
            return time.getTime() > Date.now();
          },
          shortcuts: [{
            text: '今天',
            onClick(picker) {
              picker.$emit('pick', new Date());
            }
          }, {
            text: '昨天',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit('pick', date);
            }
          }, {
            text: '一周前',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', date);
            }
          }]
        },
        value2: '',
        area: '',
        value1: '',

        token: {
          venueId: ""
        },
        showPerfectInformation: false,

        showUpdatepass: false,
        venue: {},
        venueBase: {},
        param: {
          pageNum: 1,
          pageSize: 5,
        },
        classroomNum: {},
      }
    },
    methods: {

      addVenueBase() {
        this.$http.post("venue/yVenueBase/addVenueBaseTime", {
          businessStartTime: this.value1[0],
          businessEndTime: this.value1[1],
          createTime: this.value2,
          area: this.area,
        }).then(resp => {
          this.$message({
            message: resp.data.msg,
            type: 'success'
          });
          this.showPerfectInformation = false;
          this.loadMyVenueBase();
        });
      },
      //点击完善信息弹出的窗口
      PerfectInformation() {
        this.showPerfectInformation = true;
      },
      changepass() {
        this.showUpdatepass = true;
      },
      //查询信息
      loadMyVenue() {
        this.$http.get("/account/yVenue/loadMyVenue").then(resp => {
          this.venue = resp.data.data;
        })
      },
      //查询详细信息
      loadMyVenueBase() {
        this.$http.get("/venue/yVenueBase/loadVenueBaseById", {
          params: {
            venueId: this.token.venueId
          }
        }).then(resp => {
          this.venueBase = resp.data.data;
        })
      },
      loadAllVenueClassroom() {
        this.$http.get("/venue/yVenueClassroom/pageAllClassroom", {
          params: {
            pageNum: this.param.pageNum,
            pageSize: this.param.pageSize
          }
        }).then(resp => {
          this.classroomNum = resp.data.data;
        })
      }
    },
    created() {
      this.loadMyVenue();
      this.loadMyVenueBase();
      this.loadAllVenueClassroom();
    }
  }
</script>

<style>
  #Mycenter-3 {
    font-size: 25px;
    font-family: '楷体';
  }

  #Mycenter-2 {
    margin-top: 25px;
    font-size: 25px;
    font-family: '楷体';
  }

  #MyCenter-1 {
    line-height: 30px;
    margin-left: 10px;
    font-size: 25px;
    font-family: '楷体';
  }

  .time {
    font-size: 13px;
    color: #999;
  }

  .bottom {
    margin-top: 13px;
    line-height: 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .button {
    padding: 0;
    float: right;
    margin-top: 0px;
  }

  .image {
    width: 100%;
    height: 300px;
    display: block;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }

  .clearfix:after {
    clear: both;
  }
</style>
